<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Footnotes and page floats</title>
  <style>
    @page {
      size: 300px;
      margin: 20px;
      @bottom-center {
        content: counter(page);
      }
    }
    @-adapt-footnote-area {
      width: 70%;
      padding-right: 30%;
    }
    :root {
      font-size: 16px;
      line-height: 20px;
      font-family: Arial, sans-serif;
      counter-reset: footnote;
      orphans: 1;
      widows: 1;
    }
    section {
      break-after: left;
    }
    .footnote {
      float: footnote;
      counter-increment: footnote;
    }
    .footnote::footnote-marker {
      content: counter(footnote) ". ";
    }
    .footnote::footnote-call {
      content: "[" counter(footnote) "]";
    }

    .template-footnote {
      -adapt-template: url(data:application/xml,%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20xmlns%3As%3D%22http%3A%2F%2Fwww.pyroxy.com%2Fns%2Fshadow%22%3E%3Chead%3E%3Cstyle%3E.footnote-content%7Bfloat%3Afootnote%7D%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%3Cs%3Atemplate%20id%3D%22footnote%22%3E%3Cs%3Acontent%2F%3E%3Cs%3Ainclude%20class%3D%22footnote-content%22%2F%3E%3C%2Fs%3Atemplate%3E%3C%2Fbody%3E%3C%2Fhtml%3E#footnote);
    }
    .template-footnote-content {
      display: none;
    }
    .template-footnote-content:footnote-content {
      display: block;
    }

    .column-float, .region-float, .page-float {
      float: bottom;
      -ah-float:bottom;
      margin: 3px;
      padding: 3px;
      border: blue dashed 2px;
    }
    .top {
      float: top;
      -ah-float: top;
    }
    .high {
      height: 120px;
    }
    .column-float {
      -ah-float-reference: column;
      float-reference: column;
    }
    .region-float {
      -ah-float-reference: page;
      float-reference: region;
    }
    .page-float {
      -ah-float-reference: page;
      float-reference: page;
    }

    #fn1:footnote-content {
      margin-top: 10px;
      width: 50%;
      background: lightgray;
      margin-left: 10px;
      margin-right: 30px;
    }
    #fn2:footnote-content {
      margin-bottom: 20px;
      width: 50%;
      background: lightgray;
      margin-left: 10px;
      margin-right: 30px;
    }
  </style>
</head>
<body>
<section>
  All footnotes <span id="fn1" class="footnote">footnote</span>
  <span class="column-float">bottom column float (P1)</span>
  <span class="region-float">bottom region float (P1)</span>
  should be
  below page floats.
  All footnotes <span id="fn2" class="footnote">footnote</span>
  <span class="page-float">bottom page float (P1)</span>
  should be
  below page floats.
</section>

<section>
  All footnotes <a class="template-footnote" href="#template-footnote-1">[1]</a>
  <span class="column-float">bottom column float (P2)</span>
  <span class="region-float">bottom region float (P2)</span>
  <span class="page-float">bottom page float (P2)</span>
  should be
  below page floats.
  All footnotes <a class="template-footnote" href="#template-footnote-2">[2]</a>
  should be
  below page floats.
  <div id="template-footnote-1" class="template-footnote-content">template footnote 1</div>
  <div id="template-footnote-2" class="template-footnote-content">template footnote 2</div>
</section>

<section>
  This page (P4) should have one footnote <span class="footnote">footnote</span>
  <span class="page-float top high">top page float (P4)</span>
  and another footnote  <span class="footnote">A very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long footnote</span>
  should be deferred to the next page.
</section>

<section>
  This page (P6) should have one footnote <span class="footnote">footnote</span>
  <span class="page-float high">bottom page float (P6)</span>
  and another footnote  <span class="footnote">A very long long long long long long long long long long long long long long long long long long long long long long long long long long long footnote</span>
  should be deferred to the next page.
</section>
</body>
</html>
